<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.在DOM的HTML事件中，下列哪个事件是当用户单击鼠标时触发的？（选择一项） |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/82.9e069d8f.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt练习</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/jswork/01-认识javascript.html" class="sidebar-link">01-认识javaScript</a></li><li><a href="/./guide/notes/jswork/02-变量与数据类型.html" class="sidebar-link">02-变量与数据类型</a></li><li><a href="/./guide/notes/jswork/03-DOM.html" class="sidebar-link">03-DOM</a></li><li><a href="/./guide/notes/jswork/04-表达式和操作符.html" class="sidebar-link">04-表达式和操作符</a></li><li><a href="/./guide/notes/jswork/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/jswork/06-循环.html" class="sidebar-link">06-循环</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>07-暂无</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/./guide/notes/jswork/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/jswork/09-案例.html" class="sidebar-link">09-案例</a></li><li><a href="/./guide/notes/jswork/10-数组.html" class="sidebar-link">10-数组</a></li><li><a href="/./guide/notes/jswork/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/jswork/12-DOM.html" aria-current="page" class="active sidebar-link">12-DOM</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/./guide/notes/jswork/13-浏览器操作.html" class="sidebar-link">13-BOM</a></li><li><a href="/./guide/notes/jswork/14-面向project.html" class="sidebar-link">14-面向对象</a></li><li><a href="/./guide/notes/jswork/15-Js阶段测试组卷.html" class="sidebar-link">15-Js阶段测试组卷</a></li><li><a href="/./guide/notes/jswork/16-模板字符串箭头函数变量声明.html" class="sidebar-link">16-模板字符串箭头函数变量声明</a></li><li><a href="/./guide/notes/jswork/17-解构赋值.html" class="sidebar-link">17-解构赋值</a></li><li><a href="/./guide/notes/jswork/18-project字面量增强和函数默认参数.html" class="sidebar-link">18-对象字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/jswork/19-剩余参数和数组展开.html" class="sidebar-link">19-剩余参数和数组展开</a></li><li><a href="/./guide/notes/jswork/20-Map Set.html" class="sidebar-link">20-Map Set</a></li><li><a href="/./guide/notes/jswork/21-iterator和for...of循环.html" class="sidebar-link">21-iterator和for...of循环</a></li><li><a href="/./guide/notes/jswork/22-Promise和class.html" class="sidebar-link">22-Promise和class</a></li><li><a href="/./guide/notes/jswork/23-module.html" class="sidebar-link">23-module</a></li><li><a href="/./guide/notes/jswork/24-ES6测评题目.html" class="sidebar-link">24-ES6测评题目</a></li><li><a href="/./guide/notes/jswork/25-本地存储和http.html" class="sidebar-link">25-本地存储和http</a></li><li><a href="/./guide/notes/jswork/26-ajax选择题.html" class="sidebar-link">26-ajax选择题</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h3 id="_1-在dom的html事件中-下列哪个事件是当用户单击鼠标时触发的-选择一项"><a href="#_1-在dom的html事件中-下列哪个事件是当用户单击鼠标时触发的-选择一项" class="header-anchor">#</a> 1.在DOM的HTML事件中，下列哪个事件是当用户单击鼠标时触发的？（选择一项）</h3> <p>**A.**onload</p> <p>**B.**onclick</p> <p>**C.**onblur</p> <p>**D.**onmouseout</p> <p><strong>本题考查DOM中的HTML事件。</strong></p> <p>A：onload 事件会在页面或图像加载完成后立即触发；</p> <p>B：onclick事件会在对象被单击时触发；</p> <p>C：onblur 事件会在对象失去焦点时触发；</p> <p>D：onmouseout 事件会在鼠标指针移出指定的对象时触发；</p> <p>本题要求单击鼠标时触发，<strong>所以答案为B。</strong></p> <h3 id="_2-dom中的哪个事件会在网页中的所有元素-文本、图像、css样式等-加载完后才触发执行-选择一项"><a href="#_2-dom中的哪个事件会在网页中的所有元素-文本、图像、css样式等-加载完后才触发执行-选择一项" class="header-anchor">#</a> 2.DOM中的哪个事件会在网页中的所有元素（文本、图像、CSS样式等）加载完后才触发执行？（选择一项）</h3> <p>**A.**onload</p> <p>**B.**onclick</p> <p>**C.**onblur</p> <p>**D.**onmouseout</p> <p><strong>本题考查DOM的onload事件。</strong></p> <p>A：onload事件是在网页中的元素（图片、外部关联文件等）都完全加载到浏览器之后才触发执行。</p> <p>B：onclick是在点击的时候触发。</p> <p>C：onmouseover 事件会在鼠标指针移动到指定的元素上时触发。</p> <p>D：onblur事件是失去焦点时触发。</p> <p>本题要求在网页中所有元素加载完后触发执行，<strong>所以答案为A。</strong></p> <h3 id="_3-观察截图中的代码-选项中说法正确的是-选择两项"><a href="#_3-观察截图中的代码-选项中说法正确的是-选择两项" class="header-anchor">#</a> 3.观察截图中的代码，选项中说法正确的是？（选择两项）</h3> <p><a href="https://imgchr.com/i/BF6I2V" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/10/22/BF6I2V.png" alt="BF6I2V.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>**A.**页面打开时会弹出“云牧好帅好帅“</p> <p>**B.**点击按钮，会弹出“云牧好帅好帅“</p> <p>**C.**系统报错，设置的onclick事件为空</p> <p>**D.**页面要顺利执行脚本弹出“云牧好帅好帅“，需加上onload事件</p> <p>本题考查DOM的onload事件。</p> <p>onload事件是在网页中的元素（图片、外部关联文件等）都完全加载到浏览器之后才执行。</p> <p>本题代码中，当浏览器读到js脚本（代码）时，body中的元素还未解析，所以找不到对应的DOM元素，系统会报错。需要把js脚本放在onload事件中，这样让页面中的元素加载完之后，再执行js代码。</p> <p><strong>所以本题答案为CD。</strong></p> <h3 id="_4-下列选项中哪个是按下键盘事件-选择一项"><a href="#_4-下列选项中哪个是按下键盘事件-选择一项" class="header-anchor">#</a> 4.下列选项中哪个是按下键盘事件？（选择一项）</h3> <p>**A.**onkeydown</p> <p>**B.**onmousedown</p> <p>**C.**onmouseover</p> <p>**D.**onkeyup</p> <p><strong>本题考查DOM的键盘事件。</strong></p> <p>A：onkeydown事件会在按下键盘时触发；</p> <p>B： onmousedown是鼠标按下事件；</p> <p>C： onmouseover是鼠标经过事件；</p> <p>D：onkeyup是键盘松开事件；</p> <p>本题要选择按下键盘的事件，<strong>所以答案为A。</strong></p> <h3 id="_5-下列事件属性中-哪个表示键盘事件触发时的键的字符代码-选择一项"><a href="#_5-下列事件属性中-哪个表示键盘事件触发时的键的字符代码-选择一项" class="header-anchor">#</a> 5.下列事件属性中，哪个表示键盘事件触发时的键的字符代码？（选择一项）</h3> <p>**A.**onkeydown</p> <p>**B.**onkeyCode</p> <p>**C.**keyCode</p> <p>**D.**onclick</p> <p>参考解析：</p> <p><strong>本题考查keyCode属性。</strong></p> <p>A：onkeydown事件在键盘按下的时候触发。</p> <p>B：keyCode不需要添加on。</p> <p>C：keyCode 属性返回某个事件触发的键的值的字符代码</p> <p>D：onclick是在单击的时候触发。</p> <p>本题选择键盘事件触发时，键的字符代码**，所以答案为C。**</p> <h3 id="_6-关于onfocus和onblur事件下列说法正确的是-选择两项"><a href="#_6-关于onfocus和onblur事件下列说法正确的是-选择两项" class="header-anchor">#</a> 6.关于onfocus和onblur事件下列说法正确的是？（选择两项）</h3> <p>**A.**onfocus和onblur事件常用在表单元素中</p> <p>**B.**onfocus事件是失去焦点时触发</p> <p>**C.**onblur事件是获得焦点时触发</p> <p>**D.**onfocus事件是获得焦点时触发</p> <p>本题考查onfocus事件和onblur事件。</p> <p>onfocus事件和onblur事件常和表单配合使用，onfocus事件是获得焦点时触发，onblur事件是失去焦点时触发。</p> <p><strong>所以本题答案为AD。</strong></p> <h3 id="_7-关于鼠标位置-以下说法中错误的是-选择两项"><a href="#_7-关于鼠标位置-以下说法中错误的是-选择两项" class="header-anchor">#</a> 7.关于鼠标位置，以下说法中错误的是？（选择两项）</h3> <p>**A.**pageX表示鼠标指针相对于浏览器窗口的水平坐标</p> <p>**B.**pageX表示鼠标指针相对于整个网页的水平坐标</p> <p>**C.**offsetY表示鼠标指针相对于事件源元素的垂直坐标</p> <p>**D.**offsetY表示鼠标指针相对于浏览器窗口的垂直坐标</p> <p><strong>本题考查pageX和offsetY两个属性的作用。</strong></p> <p>pageX表示鼠标指针相对于整个网页的水平坐标，所以A错误，B正确。</p> <p>offsetY表示鼠标指针相对于事件源元素的垂直坐标，所以C正确，D错误。</p> <p>本题选择错误的说法，<strong>所以答案为AD。</strong></p> <h3 id="_8-观察以下代码-假如鼠标在div的正中心点击一下-那么输出的结果是-选择一项"><a href="#_8-观察以下代码-假如鼠标在div的正中心点击一下-那么输出的结果是-选择一项" class="header-anchor">#</a> 8.观察以下代码，假如鼠标在div的正中心点击一下，那么输出的结果是？（选择一项）</h3> <p>**A.**150,150</p> <p>**B.**200,100</p> <p>**C.**350,250</p> <p>**D.**300,300</p> <p>本题考查clientX和clientY。</p> <p>clientX表示鼠标指针相对于浏览器窗口的水平坐标，clientY表示鼠标相对于浏览器窗口的垂直坐标，即两个属性表示鼠标距离浏览器左上角的坐标。</p> <p>本题中，鼠标点击的是元素正中心，那么鼠标距离浏览器左上角的坐标如下图所示：</p> <p><img src="https://img.mukewang.com/climg/5f5332fd0960391306670425.jpg" alt="//img.mukewang.com/climg/5f5332fd2960391305001000.jpg"></p> <p>鼠标水平坐标（clientX）=150（元素宽度的一半）+200（左间距）=350；</p> <p>鼠标水平坐标（clientY）=150（元素高度的一半）+100（上间距）=250；</p> <p>所以本题答案为C。</p> <h3 id="_9-下列关于事件委托说法正确的是-选择两项"><a href="#_9-下列关于事件委托说法正确的是-选择两项" class="header-anchor">#</a> 9.下列关于事件委托说法正确的是？（选择两项）</h3> <p>**A.**利用冒泡的原理，把事件加到父级上，触发执行效果</p> <p>**B.**使用事件委托的可以提高性能</p> <p>**C.**利用冒泡的原理，把事件加到子级上，触发执行效果</p> <p>**D.**使用事件委托的代码量会增大、不利于性能优化</p> <p>本题考查事件委托。</p> <p>事件委托是利用冒泡的原理，把事件加到父级上，触发执行效果。A说法正确，C说法错误；</p> <p>使用事件委托的可以提高性能，B说法正确，D说法错误；</p> <p>所以本题答案为AB。</p> <h3 id="_10-编程题"><a href="#_10-编程题" class="header-anchor">#</a> 10.编程题</h3> <p><a href="https://imgchr.com/i/BFWBX6" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/10/22/BFWBX6.gif" alt="BFWBX6.gif"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">*</span> <span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
        <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token selector">ul</span> <span class="token punctuation">{</span>
        <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
        <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>#8cc1de<span class="token punctuation">,</span> #f9a886<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
        <span class="token property">padding-top</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left</span> <span class="token punctuation">{</span>
        <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 60px 20px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .right</span> <span class="token punctuation">{</span>
        <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 60px 20px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-top</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #f60<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-top a</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
        <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-bottom</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-bottom li</span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #aaa<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
        <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-bottom li i</span> <span class="token punctuation">{</span>
        <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .left-bottom li:hover i</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .right ul</span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#wrap .content .right li</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #fff<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    热门目的地
                    <span class="token comment">&lt;!--&lt;a href=&quot;#&quot;&gt;马来西亚&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;泰国&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;三亚&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;新西兰&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;云南&lt;/a&gt;--&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token comment">&lt;!--&lt;li&gt;马来西亚 | &lt;i&gt;x&lt;/i&gt;&lt;/li&gt;
&lt;li&gt;马来西亚 | &lt;i&gt;x&lt;/i&gt;&lt;/li&gt;
&lt;li&gt;马来西亚 | &lt;i&gt;x&lt;/i&gt;&lt;/li&gt;
&lt;li&gt;马来西亚 | &lt;i&gt;x&lt;/i&gt;&lt;/li&gt;--&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
                    <span class="token comment">&lt;!--&lt;li&gt;马来西亚&lt;/li&gt;
&lt;li&gt;云南&lt;/li&gt;--&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;马来西亚&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;泰国&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;三亚&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;新西兰&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;云南&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> left_top <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;.left-top&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> frag <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> left_bottom_ul <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;.left-bottom&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> rigth_ul <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;.right ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">//用于检测对应的标签有没有点击过</span>
            <span class="token keyword">let</span> ifClickArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

            arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">let</span> oA <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                oA<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&quot;javascript:;&quot;</span><span class="token punctuation">;</span>
                oA<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> item<span class="token punctuation">;</span>
                frag<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oA<span class="token punctuation">)</span><span class="token punctuation">;</span>
                oA<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">//先判断对应的内容有没有生成过</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>ifClickArr<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
                    ifClickArr<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
                    <span class="token comment">//// 给左边内容 ul  添加内容</span>
                    <span class="token comment">//creatLeftUlNode(index);</span>

                    <span class="token comment">////给右边ul添加内容</span>
                    <span class="token comment">//creatRightUlNode(index);</span>

                    <span class="token function">createNode</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">;</span>

                left_top<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>frag<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">////左边ul对应的函数</span>
            <span class="token comment">//function creatLeftUlNode(index) {</span>
            <span class="token comment">//  let li = document.createElement(&quot;li&quot;);</span>
            <span class="token comment">//  let i = document.createElement(&quot;i&quot;);</span>

            <span class="token comment">//  li.innerHTML = arr[index];</span>

            <span class="token comment">//  i.innerHTML = &quot;x&quot;;</span>

            <span class="token comment">//  li.appendChild(i);</span>
            <span class="token comment">//  left_bottom_ul.appendChild(li);</span>

            <span class="token comment">//  //每一个i是有点击事件的</span>
            <span class="token comment">//  i.onclick = function () {</span>
            <span class="token comment">//    //left_bottom_ul.removeChild(li);</span>
            <span class="token comment">//    //干掉自己的爸爸</span>
            <span class="token comment">//    this.parentNode.parentNode.removeChild(this.parentNode);</span>
            <span class="token comment">//  };</span>
            <span class="token comment">//}</span>
            <span class="token comment">////右边ul对应的函数</span>
            <span class="token comment">//function creatRightUlNode(index) {</span>
            <span class="token comment">//  let li = document.createElement(&quot;li&quot;);</span>
            <span class="token comment">//  li.innerHTML = arr[index];</span>
            <span class="token comment">//  rigth_ul.appendChild(li);</span>
            <span class="token comment">//}</span>

            <span class="token keyword">function</span> <span class="token function">createNode</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">//左边ul对应的函数</span>

                <span class="token keyword">let</span> leftLi <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">let</span> rightLi <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token operator">~</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">creatLeftUlNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">let</span> i <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                    leftLi<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> arr<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>

                    i<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">&quot;x&quot;</span><span class="token punctuation">;</span>

                    leftLi<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    left_bottom_ul<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>leftLi<span class="token punctuation">)</span><span class="token punctuation">;</span>

                    <span class="token comment">//每一个i是有点击事件的</span>
                    i<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token comment">//干掉自己的爸爸</span>
                        <span class="token comment">//this.parentNode.parentNode.removeChild(this.parentNode);</span>

                        left_bottom_ul<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>leftLi<span class="token punctuation">)</span><span class="token punctuation">;</span>
                        rigth_ul<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>rightLi<span class="token punctuation">)</span><span class="token punctuation">;</span>

                        ifClickArr<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token comment">//右边ul对应的函数</span>
                <span class="token operator">~</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">creatRightUlNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    rightLi<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> arr<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
                    rigth_ul<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>rightLi<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/jswork/11-字符串.html" class="prev">
        11-字符串
      </a></span> <span class="next"><a href="/./guide/notes/jswork/13-浏览器操作.html">
        13-BOM
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/82.9e069d8f.js" defer></script>
  </body>
</html>
